<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/x-icon" th:href="@{/image/blog.ico}"/>
    <title>Blog</title>
    <style>
        /* Style for navigation bar */
        .navbar {
            overflow: hidden;
            background-color: rgb(128, 128, 128);
        }

        .navbar a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        .navbar a.right {
            float: right;
        }

        /* Style for table */
        table {
            width: 80%;
            margin: 20px auto 0; /* 20px上边距，居中 */
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid #dddddd;
            text-align: center;
            padding: 8px;
        }

        th:nth-child(1), td:nth-child(1) {
            width: 8%;
        }

        th:nth-child(2), td:nth-child(2) {
            width: 50%;
        }

        th:nth-child(3), td:nth-child(3) {
            width: 20%;
        }

        th:nth-child(4), td:nth-child(4) {
            width: 12%;
        }
    </style>
</head>
<body>

<!-- Navigation bar -->
<div class="navbar">
    <a href="#">Blog</a>
    <a href="/admin/add">添加</a>
    <a href="#" class="right" th:text="${session.username}">Your Name</a>
</div>

<!-- Table -->
<table>
    <tr>
        <th>ID</th>
        <th style="width: 500px">标题</th>
        <th>日期</th>
        <th>操作</th>
    </tr>
    <tr th:each="blog:${blogList}">
        <td th:text="${blog.id}">001</td>
        <td th:text="${blog.title}">hello word</td>
        <td th:text="${#dates.format(blog.createDate, 'yyyy-MM-dd HH:mm:ss')}">20230101</td>
        <td><a href="#">编辑</a> | <a href="#">删除</a></td>
    </tr>
</table>

</body>
</html>